<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>filter内置函数的用法</title>
</head>
<!-- 
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
-->

<body>
    <p>点击按钮获取数组中大于 18 的所有元素。</p>
    <button onclick="myFunction()">点我</button>
    <p id="demo"></p>
</body>
<script>
    //定义一个数组保存年龄
    let ages = [32, 33, 16, 40];

    //检测年龄是否大于 18 
    function checkAdult(age) {
        return age >= 18;
    }

    function myFunction() {
        document.getElementById("demo").innerHTML = ages.filter(checkAdult);
    }

    // filter 应用场景:
    //1.利用 filter 遍历出所有偶数:
    let arr = [1, 3, 4, 8, 10, 9, 6]
        //value: 数组中当前正在处理的元素, index: 正在处理的元素在数组中的索引, arr: 调用了 filter 的数组本身
    let newArr = arr.filter(function(value, index, arr) {
            return value % 2 === 0;
        })
        //console.log(newArr)

    /**
     * indexOf(searchStr,start) 方法可返回某个指定的字符串值在字符串中首次出现的位置。
       如果没有找到匹配的字符串则返回 -1.

       start:可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。
             如省略该参数，则将从字符串的首字符开始检索
     * 
    */
    var str = "Hello world, welcome to the universe.";
    var indexValue = str.indexOf("welcome"); //索引值
    //console.log(indexValue)

    //2.利用 filter 去重
    var arr1 = [1, 1, 'RUNOOB', 'RUNOOB', true, true, 15];

    function unique(arr) {
        return arr.filter(function(item, index, arr) {
            /**
             * 当前元素，在原始数组中的第一个索引 == 当前索引值，否则返回当前元素
             * 巧妙:
             *  当arr1里的第一个1进来时,它在数组里第一次出现的位置是0,而它的 index 刚好也是0,于是就把 1 返回;
             *  当arr1里的第二个1进来时,它在数组里第一次出现的位置实际是还是0,而此时它的 index 是1了, 0 === 1(不等),所以不返回,就相当于过滤了.
             *  剩下的依此类推
             */
            return arr.indexOf(item, 0) === index;
        });
    }
    console.log(unique(arr1))
</script>

</html>